<template>
    <div class="search-veh-background">
        <van-row type="flex" class='search-veh-title'>
            <van-col span="24">{{listabc.length>0?'以下是您可能在查找的车辆列表':'暂无要查找的车辆'}}</van-col>
        </van-row>
        <!-- finished  是否已加载完成，加载完成后不再触发load事件 Boolean false -->
        <van-list v-model="loading" :finished="finished" @load="onLoad" loading-text='拼命加载中...' style="background:#f7f6f6">
            <van-row v-for="item in listabc" :key="item.plateNo" class='search-veh-list'>
                <van-col span="24">
                    <van-cell>
                        <van-row class='row-bottom'>
                            <van-col span="12" v-carplate="[item.plateNo,item.plateColor]"></van-col>
                        </van-row>
                        <van-row class='row-bottom'>
                            <van-col span="16">{{item.parkName}}{{item.placeNo?'(泊位号：'+item.placeNo+')':''}}</van-col>
                           <!--  <van-col span="8" class='search-veh-date'>06小时15分钟</van-col> -->
                        </van-row>
                        <van-row class='search-veh-button'>
                            <!-- @click.native="navigationVeh(item)" -->
                            <van-col span="24" offset=0 >                                
                                地图：
                                <van-button type="primary" size="small" @click.stop="navigationVehTX(item)">腾讯</van-button>
                                <van-button type="primary" size="small" @click.stop="navigationVehBD(item)">百度</van-button>
                                <van-button type="primary" size="small" @click.stop="navigationVehGD(item)">高德</van-button>
                                 <van-button :disabled="!showPMTStatus(item)" type="primary" size="small" @click.stop="showPMT(item)">平面图</van-button>
                            </van-col>
                        </van-row>
                    </van-cell>
                </van-col>
            </van-row>
        </van-list>
    </div>
</template>
<script>
import {  SearchCarService,GuidanceService } from './api';
import  geo from '../../utils/geolocation'
import chechang from './chechang'
let geolocation = new geo("FYXBZ-5YDCW-ILWRQ-OOWLM-AJV7Z-QNFH7", "ZQwechat");
export default {
    name: 'searchVehliceList',
    data() {
        return {
            listabc: [],
            loading: false,
            finished: false,
            show: true,
            activeVeh: '',
            searchModule: {},
            zqOpenId:'',
            myPosi:{}
        };
    },
    created() {
      this.getLocation();
    },
    mounted(){
         
         this.onLoad();
    },
    methods: {
        onLoad() {
            GuidanceService.getOpenId(this.$route.query.code).then((res1) => {
                this.zqOpenId=res1;
               SearchCarService.findCarLocation(this.zqOpenId).then((res) => {
                this.listabc=res.parkingRecords;
            }, (err) => {
            });
            }, (err) => {
                return;
            });
            this.loading=false;
            this.finished=true;
        },
         getLocation() {
            geolocation.getLocation((position) => {
                this.myPosi = position;
            }, (err) => {
            }, { timeout: 8000 })
        },
        navigationVeh(item) {
        let url=`https://map.qq.com/nav/drive#walk?sword=我的位置&eword=${item.parkName}${item.placeNo ? '（泊位号%3A' + item.placeNo+'）' : ''}&dest=${item.txLng}%2C${item.txLat}&start=${this.myPosi.lng}%2C${this.myPosi.lat}&referer=ZQwechat`;
            window.location.href=url;
        },
        navigationVehTX(item){
        this.navigationVeh(item);
        },
        navigationVehBD(item){
        GuidanceService.getBaiduCoordinates(this.myPosi.lng,this.myPosi.lat).then((res)=>{
         let url=`http://api.map.baidu.com/direction?origin=latlng:${res.lat},${res.lng}|name:我的位置&destination=latlng:${item.lat},${item.lng}|name:${item.parkName}${item.placeNo ? '（泊位号%3A' + item.placeNo+'）' : ''}&mode=driving&region=济南&output=html&src=th.zq`;
            window.location.href=url;
                },(err)=>{
                  // alert('请刷新页面重试')
                })
        },
        navigationVehGD(item){
            let url=`https://uri.amap.com/navigation?from=${this.myPosi.lng}%2C${this.myPosi.lat},我的位置&to=${item.txLng}%2C${item.txLat},${item.parkName}${item.placeNo ? '（泊位号%3A' + item.placeNo+'）' : ''}&mode=walk&policy=1&src=mypage&coordinate=gaode&callnative=0`;
            window.location.href=url;
        },
         showPMTStatus(item){           
            return Object.keys(chechang).indexOf(item.parkNo)>-1;
        },
        showPMT(item){
            this.$router.push({name:'chpmt',params:item});
        }
    },
};
</script>
<style rel="stylesheet/stylus" scoped="">
.search-veh-button {
    border-top: 1px solid #f4f4f4;
    text-align: center;
    color:#4797FD;
    position: relative;
    left: 0px;
    top: 0px;
}
.van-button--primary {
    background-color: #4797fd;
    border: 1px solid #94d6ff;
}

/*.search-veh-button:hover {
    background-color: #4797FD;
    color:#ffffff;
}*/
.search-veh-title {
    color: #3DA6FF;
    text-align: center;
    padding:  20px;
}

.search-veh-background {
    position: relative;
    left: 0px;
    top: 0px;
    height: 100vh;
    background: #f7f6f6;
}

.search-veh-list {
    margin: 10px 7%;
    width: 86%;
}

.row-bottom {
    margin-bottom: 10px
}

.search-veh-date{
  text-align: right;
  color:#4797FD;
}
</style>
